<template>
  <n-config-provider :theme='theme' :locale='localeLong' :date-locale='langData'>
    <div>

      <div style="height: 50px">
        <tab-bar>
          <template v-slot:item-top>
            <div
                style="line-height: 50px;font-size: 18px;padding-left: 20px;font-family: 微软雅黑;font-weight: 500;color: #035b03">
              <img :src="logoSrc" style="height: 26px" alt="">
            </div>
          </template>
          <template v-slot:item-body>
            <tab-bar-body-item url='/control' :title='$t("tab.control")'></tab-bar-body-item>
            <tab-bar-body-item url='/queue' :title='$t("tab.queue")'></tab-bar-body-item>
            <tab-bar-body-item url='/message' :title='$t("tab.message")'></tab-bar-body-item>
            <tab-bar-body-item url='/delay' :title='$t("tab.delay")'></tab-bar-body-item>
            <tab-bar-body-item url='/producer' :title='$t("tab.producer")'></tab-bar-body-item>
            <tab-bar-body-item url='/customer' :title='$t("tab.customer")'></tab-bar-body-item>
            <tab-bar-body-item url='/subscribe' :title='$t("tab.subscribe")'></tab-bar-body-item>
            <tab-bar-body-item url='/old' :title='$t("tab.old")'></tab-bar-body-item>
          </template>
          <template v-slot:item-foot>
            <div @click="setLangCondition" style="line-height: 50px;margin-right: 15px;cursor: default">
              中/EN
            </div>
            <div @click="changeTheme" style="line-height: 60px;margin-right: 45px">
              <n-icon size="24">
                <ios-shirt/>
              </n-icon>
            </div>
          </template>
        </tab-bar>
      </div>
      <transition name='fade-transform' mode='out-in'>
        <router-view :key='key'/>
      </transition>
    </div>
  </n-config-provider>
</template>

<script lang='ts'>
import {darkTheme, createTheme} from 'naive-ui'
import {computed, defineComponent, ref} from 'vue'
import TabBar from "../../components/TabBar/TabBar.vue";
import TabBarBodyItem from "../../components/TabBar/TabBarBodyItem.vue";
import {IosShirt} from '@vicons/ionicons4'
import {useI18n} from "vue-i18n";
import {zhCN, dateZhCN,} from 'naive-ui'
import {useRoute, useRouter} from "vue-router";

export default defineComponent({
  name: "Devil",
  components: {
    TabBar,
    TabBarBodyItem,
    IosShirt
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    let langData = ref<any>(dateZhCN)
    let localeLong = ref<any>(zhCN)
    let logoSrc = ref<string>("https://xk857.com/ce/mq/z.png")
    langData.value = localStorage.getItem('langData') === "en" ? null : dateZhCN
    localeLong.value = localStorage.getItem('langData') === "en" ? null : zhCN
    logoSrc.value = localStorage.getItem('langData') === "en" ? "https://xk857.com/ce/mq/m1.png" : "https://xk857.com/ce/mq/m.png"

    let flag: any = ref(true)
    let theme: any = ref(createTheme)
    if (localStorage.getItem('theme') && localStorage.getItem('theme') === '0') {
      flag = false
      theme.value = darkTheme
      document.documentElement.setAttribute('theme', 'dark')
    }

    const changeTheme = function () {
      flag = !flag
      if (flag) {
        localStorage.setItem('theme', '1')
        theme.value = createTheme
        document.documentElement.removeAttribute('theme')
      } else {
        localStorage.setItem('theme', '0')
        theme.value = darkTheme
        document.documentElement.setAttribute('theme', 'dark')
      }
    }

    const {locale} = useI18n()
    const setLangCondition = () => {
      let lang = localStorage.getItem('lang')

      router.go(0)
      if (lang === 'en') {
        locale.value = 'zh';
        localStorage.setItem('lang', locale.value);
        localStorage.setItem('langData', "zh");
        langData.value = dateZhCN
        localeLong.value = zhCN
        logoSrc.value = "https://xk857.com/ce/mq/m.png"
      } else {
        locale.value = 'en';
        localStorage.setItem('lang', locale.value);
        localStorage.setItem('langData', "en");
        langData.value = null
        localeLong.value = null
        logoSrc.value = "https://xk857.com/ce/mq/m1.png"
      }

    }

    // 菜单内容
    let key = computed(() => route.path)

    return {
      theme,
      changeTheme,
      setLangCondition,
      langData,
      localeLong,
      key,
      logoSrc
    }

  }
})
</script>

<style lang="scss" scoped>
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
